{% extends 'products/base.html' %}
{% load static %}

{% block css %}
    <!-- Custom styles for this template -->
    <link href="{% static '/vendor/css/products.css' %}" rel="stylesheet">
{% endblock %}

{% block content %}
    <!-- Page Content -->
    <div class="container">

        <div class="row">

            <div class="col-lg-3">

                <h1 class="my-4">Store</h1>
                <div class="list-group">
                    {% for category in categories %}
                        <a href="{% url 'products:category' category.id %}" class="list-group-item">{{ category.name }}</a>
                    {% endfor %}
                </div>

            </div>
            <!-- /.col-lg-3 -->

            <div class="col-lg-9">

                <div id="carouselExampleIndicators" class="carousel slide my-4" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                            <img class="d-block img-fluid" src="{% static '/vendor/img/slides/slide-1.jpg' %}" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block img-fluid" src="{% static '/vendor/img/slides/slide-2.jpg' %}" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block img-fluid" src="{% static '/vendor/img/slides/slide-3.jpg' %}" alt="Third slide">
                        </div>
                    </div>
                    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

                <div class="row">

                    {% for product in object_list %}

                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card h-100">
                            <a href="#">
                                <img class="card-img-top"
                                     src="{{ product.image.url }}"
                                     alt="">
                            </a>
                            <div class="card-body">
                                <h4 class="card-title">
                                    <a href="#">{{ product.name }}</a>
                                </h4>
                                <h5>{{ product.price }}</h5>
                                <p class="card-text">{{ product.description }}</p>
                            </div>
                            <div class="card-footer text-center">
                                <a class="btn btn-outline-success" href="{% url 'products:basket_add' product.id %}">Отправить в корзину</a>
                            </div>
                        </div>
                    </div>

                    {% endfor %}

                </div>

                {% if is_paginated %}
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center">
                            <li class="page-item {% if not page_obj.has_previous %} disabled {% endif %}">
                                <a class="page-link" href="{% if page_obj.has_previous %} {% url 'products:paginator' page_obj.previous_page_number %} {% else %} # {% endif %}" tabindex="-1" aria-disabled="true">Previous</a>
                            </li>
                            {% for page in paginator.page_range %}
                                <li class="page-item"><a class="page-link" href="{% url 'products:paginator' page %}">{{ page }}</a></li>
                            {% endfor %}
                            <li class="page-item {% if not page_obj.has_next %} disabled {% endif %}">
                                <a class="page-link" href="{% if page_obj.has_next %} {% url 'products:paginator' page_obj.next_page_number %} {% else %} # {% endif %}">Next</a>
                            </li>
                        </ul>
                    </nav>
                {% endif %}

            </div>

        </div>

    </div>
    <!-- /.container -->
{% endblock %}

{% block footer %}
    <!-- Footer -->
    <footer class="py-5 bg-dark">
        <div class="container">
            <p class="m-0 text-center text-white">Copyright &copy; Store 2023</p>
        </div>
        <!-- /.container -->
    </footer>
{% endblock %}





